<template>
  <div class="app">
    <Head :name="name"></Head>
    <div class="block">
      <div class="block-head">
<div class="img"><img :src="'http://124.93.196.45:10001/'+item.imgUrl" alt=""></div>
<div style="font-size:20px">
  <div style="width:120px;overflow:hidden;text-overflow:ellipsis;
    white-space: nowrap;">{{item.name}}</div>
  <div style="font-size:14px;color:#666;margin-top:10px">周一到周日需预约</div>
  <div style="font-size:14px;color:#666;margin-top:10px">随时退·过期自动退·到店</div>
</div>
<div>
  <div style="font-size:16px;margin-left:20px;margin-bottom:10px">￥{{item.price}}</div>
  <van-stepper v-model="value" theme="round" button-size="22" disable-input />
</div>
      </div>
      <van-cell-group>
  <van-field
    v-model="username"
    
    required
    label="姓名"
    placeholder="请输入用户姓名"
  />
  <van-field
    v-model="phone"
    required
    label="手机号"
    placeholder="请输入手机号"
  />
  <van-field
    v-model="address"
    required
    label="地址"
    placeholder="请输入详细地址"
  />
  <van-radio-group v-model="radio" style="display:flex;font-size: 14px;margin-top:20px" >
    <div style="margin-right:50px;margin-left:15px">标签</div>
  <van-radio name="1" style="margin-right:30px">家</van-radio>
  <van-radio name="2">千锋</van-radio>
</van-radio-group>
</van-cell-group>
    </div>


    <div class="bottom">
      <div class="sum">合计￥<span style="font-size:26px">{{sum}}</span></div>
      <div class="up" @click="up">提交订单</div>
    </div>
  </div>
</template>

<script>
import mixin from "../../mixin/flag"
import  Head  from "./takeView/headView.vue"
import {createlist} from "./service"
export default {
  mixins:[mixin],
  methods:{
async up(){
  let res =await createlist(
    {
      "addressDetail":this.address,
      "amount":this.sum,
      "label":'千锋',
      "phone":this.phone,
      "quantity":this.value,
      "name":this.username,
      "orderItemList": [{ "productId": this.$route.query.id*1, "quantity": this.value }],
      "sellerId":this.$route.query.sellerId*1,
      "productId":this.$route.query.id*1,
    }
  )
  console.log(res);
  this.$dialog.confirm({
  title: '提示',
  message: '是否前往支付订单',
})
  .then(() => {
    this.$router.push('/v50')
  })
  .catch(() => {
    this.$router.push('/')
  });
  
}
  },
  data(){
    return{
      name:'提交订单',
      item:{},
      value:0,
      username:'',
      phone:'',
address:'',
radio: '1',
sum:0,
    }
  },
  watch:{
value:{
  handler(){
return this.sum=this.item.price*this.value
  }
}
  },
  mounted(){
this.item=this.$route.query
console.log(this.item);
  },
  components:{
  Head
},
}
</script>

<style lang="scss" scoped>
.app{
  overflow: hidden;
.block{
  width: 90%;
  background-color: white;
  margin:10px auto;
  border-radius: 15px;
padding: 10px;
.img{
  height: 100px;
  width: 100px;
  border-radius: 10px;
  overflow: hidden;
  img{
    height: 100px;
    width: 100px;
  }
}
.block-head{
  display: flex;
  justify-content: space-around;
}
}
.bottom{
  width: 95%;
  position: absolute;
  bottom: 0px;
  padding: 10px 10px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  .sum{
    font-size: 16px;
    color: red;
  }
  .up{
    color: rgb(250, 245, 245);
    font-size: 20px;
    padding: 10px 25px;
    background-color: #fc5f2b;
    border-radius: 25px;
  }
}
}
</style>